<template>
  <view>
    <!-- 使用uni-file-picker组件，设置相关属性 -->
    <uni-file-picker
      ref="filePicker"
      :file-mediatype="fileMediatype"
      :multiple="multiple"
      :limit="limit"
      :value="selectedFiles"
      :listStyles="listStyles"
      @select="handleSelect"
      @success="handleSuccess"
      @fail="handleFail"
    >
      <!-- <template #preview>
        <view class="selected-files">
          <view 
            class="file-item" 
            v-for="(file, index) in selectedFiles" 
            :key="file.id || index"
          >
            <text class="file-name">{{ file.name || '未命名文件' }}</text>
            <button type="default" size="mini" @click="removeFile(index)">删除</button>
          </view>
        </view>
      </template> -->
      <button type="primary">选择附件上传</button>
    </uni-file-picker>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    uploadUrl: {
      type: String,
      default: '/file/upload'
    },
    fileMediatype: {
      type: Array,
      default: () => ['all']
    },
    multiple: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 5
    },
    listStyles: {
      type: Object, 
      default: {
        // 是否显示边框
        border: true,
        // 是否显示分隔线
        dividline: true,
        // 线条样式
        borderStyle: {
          width: 1,
          color: 'blue',
          style: 'dashed',
          radius: 2
        }
      },
    },
  },
  data() {
    return {
      // 可以添加一些相关的数据，比如用于存放上传后返回的结果等
      /*
        url
        extname
        name
      */
      // selectedFiles: [...this.value],
      selectedFiles: [{
					extname: 'png',
					name: 'shuijiao.png',
				}, {
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					extname: 'png',
					name: 'shuijiao.png'
				}],
    };
  },
  onMounted() {

  },
  methods: {
    // 选择文件时触发的方法，这里可以做一些预处理等（可选）
    handleSelect(e) {
      console.log('选择的文件信息：', e);
    },
    // 实际执行上传的方法
    uploadFile(filePath) {
      const token = uni.getStorageSync('token'); // 假设从本地存储获取认证token，实际按你的认证方式调整
      uni.uploadFile({
        url: this.uploadUrl, // 后台接口地址
        filePath: filePath,
        name: 'file', // 一般对应后台接收文件的参数名，按实际情况修改
        header: {
          'Authorization': `${token}` // 携带认证信息，按实际需求配置
        },
        success: (res) => {
          console.log('上传成功响应：', res);
          this.handleSuccess(res);
        },
        fail: (err) => {
          console.log('上传失败：', err);
          this.handleFail(err);
        }
      });
    },
    // 上传成功的回调处理
    handleSuccess(res) {
      // 可以在这里对上传成功后的结果进行展示、存储等操作
      console.log('文件上传成功，响应内容：', res.data);
      this.$emit('update:modelValue', res.data);
    },
    // 上传失败的回调处理
    handleFail(err) {
      console.log('文件上传失败，错误信息：', err);
    },
    // 当uni-file-picker组件选择文件并确认后触发，开始上传流程
    handleSelect(e) {
      const fileList = e.tempFiles;
      if (fileList.length > 0) {
        const filePath = fileList[0].path;
        this.uploadFile(filePath);
      }
    }
  },
  
  watch: {
    // 监听外部传入的文件列表变化
    value(newVal) {
      this.selectedFiles = [...newVal];
    },
    // 监听内部文件列表变化，通知父组件
    selectedFiles: {
      handler(newVal) {
        this.$emit('input', [...newVal]);
      },
      deep: true
    }
  }
};
</script>